<div class="kit-table">
    <form class="layui-form" lay-filter="kit-search-form">
        <div class="kit-table-header">
            <div class="kit-search-btns">
                <a href="javascript:;" data-action="add" class="layui-btn layui-btn-sm"><i class="layui-icon">&#xe608;</i> 鏂板</a>
                <a href="javascript:;" data-action="del-bulk" class="layui-btn layui-btn-sm layui-btn-danger"><i class="layui-icon">&#xe640;</i> 鎵归噺鍒犻櫎</a>
            </div>
            <div class="kit-search-inputs">
                <div class="kit-search-keyword">
                    <input type="text" class="layui-input" name="keyword" placeholder="鎼滅储鍏抽敭瀛�.." />
                    <button lay-submit lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
                </div>
                <div class="kit-search-more" id="kit-search-more">鏇村绛涢��<i class="layui-icon">&#xe61a;</i></div>
            </div>
        </div>
        <div class="kit-search-mored layui-anim layui-anim-upbit">
            <div class="kit-search-body">
                <div class="layui-form-item">
                    <label class="layui-form-label">杈撳叆妗�</label>
                    <div class="layui-input-block">
                        <input type="text" name="title" placeholder="璇疯緭鍏ユ爣棰�" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">楠岃瘉鎵嬫満</label>
                        <div class="layui-input-inline">
                            <input type="tel" name="phone" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                    <div class="layui-inline">
                        <label class="layui-form-label">楠岃瘉閭</label>
                        <div class="layui-input-inline">
                            <input type="text" name="email" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">鑼冨洿</label>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="price_min" placeholder="锟�" autocomplete="off" class="layui-input">
                        </div>
                        <div class="layui-form-mid">-</div>
                        <div class="layui-input-inline" style="width: 100px;">
                            <input type="text" name="price_max" placeholder="锟�" autocomplete="off" class="layui-input">
                        </div>
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">鍗曡閫夋嫨妗�</label>
                    <div class="layui-input-block">
                        <select name="interest" lay-filter="aihao">
                            <option value=""></option>
                            <option value="0">鍐欎綔</option>
                            <option value="1" selected="">闃呰</option>
                            <option value="2">娓告垙</option>
                            <option value="3">闊充箰</option>
                            <option value="4">鏃呰</option>
                          </select>
                    </div>
                </div>
            </div>
            <div class="kit-search-footer">
                <button type="reset" class="layui-btn layui-btn-sm layui-btn-primary kit-btn">閲嶇疆</button>
                <button lay-submit lay-filter="search" class="layui-btn layui-btn-sm kit-btn">纭畾</button>
            </div>
        </div>
    </form>
    <div class="kit-table-body">
        <table id="demo" lay-filter="demo"></table>
        <script type="text/html" id="barDemo">
            <a class="layui-btn layui-btn-xs" lay-event="detail">鏌ョ湅</a>
            <a class="layui-btn layui-btn-xs" lay-event="edit">缂栬緫</a>
            <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">鍒犻櫎</a>
        </script>
    </div>
</div>


<script type="text/html" id="edit-tpl">
    <div style="margin:10px">
        <form class="layui-form" action="" lay-filter="form-edit">
            <input type="hidden" name="id" value="{{d.user.id}}" />
            <div class="layui-form-item">
                <label class="layui-form-label">鐢ㄦ埛鍚�</label>
                <div class="layui-input-block">
                    <input type="text" name="username" required lay-verify="required" value="{{d.user.username}}" placeholder="璇疯緭鍏ユ爣棰�" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">瀵嗙爜妗�</label>
                <div class="layui-input-inline">
                    <input type="password" name="password" required lay-verify="required" placeholder="璇疯緭鍏ュ瘑鐮�" autocomplete="off" class="layui-input">
                </div>
                <div class="layui-form-mid layui-word-aux">杈呭姪鏂囧瓧</div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">鍗曢�夋</label>
                <div class="layui-input-block">
                    {{# var woman = d.user.sex === 0?'checked':'';}} {{# var man = d.user.sex === 1?'checked':'';}}
                    <input type="radio" name="sex" value="鐢�" title="鐢�" {{man}} />
                    <input type="radio" name="sex" value="濂�" title="濂�" {{woman}} />
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">鍩庡競</label>
                <div class="layui-input-block">
                    <select name="city" lay-verify="required">
                      <option value=""></option>
                      {{# layui.each(d.citys,function(index,item){ }}                      
                      {{# if(item.id===d.user.city){}}
                      <option value="{{item.id}}" selected>{{item.name}}</option>
                      {{#}else{}}
                      <option value="{{item.id}}">{{item.name}}</option>
                      {{#};}}
                      {{# }); }}
                    </select>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">绉垎</label>
                <div class="layui-input-block">
                    <input type="number" name="experience" required lay-verify="required" value="{{d.user.experience}}" placeholder="璇疯緭鍏ョН鍒�" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">璇勫垎</label>
                <div class="layui-input-block">
                    <input type="number" name="score" required lay-verify="required" value="{{d.user.score}}" placeholder="璇疯緭鍏ヨ瘎鍒�" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">璐㈠瘜</label>
                <div class="layui-input-block">
                    <input type="number" name="wealth" required lay-verify="required" value="{{d.user.wealth}}" placeholder="璇疯緭鍏ヨ储瀵�" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">鑱屼笟</label>
                <div class="layui-input-block">
                    <select name="classify" lay-verify="required">
                        <option value=""></option>                        
                      {{# layui.each(d.classifies,function(index,item){ }}
                      {{# if(item.id===d.user.classify){}}
                      <option value="{{item.id}}" selected>{{item.name}}</option>
                      {{#}else{}}
                      <option value="{{item.id}}">{{item.name}}</option>
                      {{#};}}
                      {{# }); }}
                    </select>
                </div>
            </div>
            <div class="layui-form-item layui-form-text">
                <label class="layui-form-label">绛惧悕</label>
                <div class="layui-input-block">
                    <textarea name="sign" placeholder="璇疯緭鍏ヤ釜鎬х鍚�" class="layui-textarea">{{d.user.sign}}</textarea>
                </div>
            </div>
            <div class="layui-form-item" style="display:none;">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit lay-filter="formEdit">绔嬪嵆鎻愪氦</button>
                    <button type="reset" class="layui-btn layui-btn-primary">閲嶇疆</button>
                </div>
            </div>
        </form>
    </div>
</script>

<script>
    layui.use(['table'], function() {
        var table = layui.table,
            $ = layui.jquery,
            layer = layui.layer,
            form = layui.form,
            laytpl = layui.laytpl;
        var tableIns = table.render({
            elem: '#demo',
            height: 'full-135', //瀹瑰櫒楂樺害
            url:baseUrl+ 'table.json',
            page: true,
            id: 'demo',
            cols: [
                [{
                    checkbox: true,
                    fixed: true
                }, {
                    field: 'id',
                    title: 'ID',
                    width: 80
                }, {
                    field: 'username',
                    title: '鐢ㄦ埛鍚�',
                    width: 80
                }, {
                    field: 'sex',
                    title: '鎬у埆',
                    width: 80
                }, {
                    field: 'city',
                    title: '鍩庡競',
                    width: 80
                }, {
                    field: 'sign',
                    title: '绛惧悕',
                    width: 177
                }, {
                    field: 'experience',
                    title: '绉垎',
                    width: 80
                }, {
                    field: 'score',
                    title: '璇勫垎',
                    width: 80
                }, {
                    field: 'classify',
                    title: '鑱屼笟',
                    width: 80
                }, {
                    field: 'wealth',
                    title: '璐㈠瘜',
                    width: 135,
                    sort: true
                }, {
                    fixed: 'right',
                    title: '鎿嶄綔',
                    width: 150,
                    align: 'center',
                    toolbar: '#barDemo'
                }]
            ],
            done: function(res, curr, count) {
                //濡傛灉鏄紓姝ヨ姹傛暟鎹柟寮忥紝res鍗充负浣犳帴鍙ｈ繑鍥炵殑淇℃伅銆�
                //濡傛灉鏄洿鎺ヨ祴鍊肩殑鏂瑰紡锛宺es鍗充负锛歿data: [], count: 99} data涓哄綋鍓嶉〉鏁版嵁銆乧ount涓烘暟鎹�婚暱搴�
                // console.log(res);
                // //寰楀埌褰撳墠椤电爜
                // console.log(curr);
                // //寰楀埌鏁版嵁鎬婚噺
                // console.log(count);
            },
            loading: true,
            //method: 'post'
        });
        var staticData = {
            citys: [{
                id: 0,
                name: '鍖椾含'
            }, {
                id: 1,
                name: '骞垮窞'
            }, {
                id: 2,
                name: '娣卞湷'
            }, {
                id: 3,
                name: '鏉窞'
            }],
            classifies: [{
                id: 0,
                name: '璇嶄汉'
            }, {
                id: 1,
                name: '璇椾汉'
            }, {
                id: 2,
                name: '浣滃'
            }, {
                id: 3,
                name: '閰辨补'
            }]
        };
        //鐩戝惉鎼滅储琛ㄥ崟鎻愪氦
        form.on('submit(search)', function(data) {
            console.log(data.field);
            layer.msg(JSON.stringify(data.field));
            //甯︽潯浠舵煡璇�
            tableIns.reload({
                where: data.field
            });
            return false;
        });
        //鐩戝惉宸ュ叿鏉�
        table.on('tool(demo)', function(obj) { //娉細tool鏄伐鍏锋潯浜嬩欢鍚嶏紝test鏄痶able鍘熷瀹瑰櫒鐨勫睘鎬� lay-filter="瀵瑰簲鐨勫��"
            var data = obj.data; //鑾峰緱褰撳墠琛屾暟鎹�
            var layEvent = obj.event; //鑾峰緱 lay-event 瀵瑰簲鐨勫��
            var tr = obj.tr; //鑾峰緱褰撳墠琛� tr 鐨凞OM瀵硅薄

            if (layEvent === 'detail') { //鏌ョ湅
                console.log(table.checkStatus('demo'));
                //do somehing
            } else if (layEvent === 'del') { //鍒犻櫎
                layer.confirm('鐪熺殑鍒犻櫎琛屼箞', function(index) {
                    obj.del(); //鍒犻櫎瀵瑰簲琛岋紙tr锛夌殑DOM缁撴瀯
                    layer.close(index);
                    //鍚戞湇鍔＄鍙戦�佸垹闄ゆ寚浠�
                });
            } else if (layEvent === 'edit') { //缂栬緫
                var d = {
                    user: data,
                    citys: staticData.citys,
                    classifies: staticData.classifies
                };
                //do something
                laytpl($('#edit-tpl').html()).render(d, function(html) {
                    layer.open({
                        type: 1,
                        title: '琛ㄥ崟',
                        content: html,
                        area: ['800px', '600px'],
                        btn: ['鎻愪氦', '閲嶇疆', '鍙栨秷'],
                        yes: function(index, layero) {
                            editIndex = index;
                            $('form[lay-filter="form-edit"]').find('button[lay-submit]').click();
                        },
                        btn2: function(index, layero) {
                            $('form[lay-filter="form-edit"]').find('button[type="reset"]').click();
                            return false;
                        },
                        success: function() {
                            form.render(null, 'form-edit');
                        }
                    });
                });
                //鍚屾鏇存柊缂撳瓨瀵瑰簲鐨勫��
                // obj.update({
                //     username: '123',
                //     title: 'xxx'
                // });
            }
        });
        form.render(null, 'kit-search-form');
        $('#kit-search-more').on('click', function() {
            $('.kit-search-mored').toggle();
        });
        var editIndex;
        form.on('submit(formEdit)', function(data) {
            layer.msg('formEdit');
            editIndex && layer.close(editIndex); //鍏抽棴寮瑰嚭灞�
            return false;
        });
        $('.kit-search-btns').children('a').off('click').on('click', function() {
            var $that = $(this),
                action = $that.data('action');
            switch (action) {
                case 'add':
                    var d = {
                        user: {
                            sign: '',
                            city: '',
                            classify: '',
                            experience: '',
                            id: 0,
                            logins: '',
                            score: '',
                            sex: 1,
                            sign: '',
                            username: '',
                            wealth: ''
                        },
                        citys: staticData.citys,
                        classifies: staticData.classifies
                    };
                    //娓叉煋
                    laytpl($('#edit-tpl').html()).render(d,
                        function(html) {
                            layer.open({
                                type: 1,
                                title: '琛ㄥ崟',
                                content: html,
                                area: ['800px', '600px'],
                                btn: ['鎻愪氦', '閲嶇疆', '鍙栨秷'],
                                yes: function(index, layero) {
                                    editIndex = index;
                                    $('form[lay-filter="form-edit"]').find('button[lay-submit]').click();
                                },
                                btn2: function(index, layero) {
                                    $('form[lay-filter="form-edit"]').find('button[type="reset"]').click();
                                    return false;
                                },
                                success: function() {
                                    form.render(null, 'form-edit');
                                }
                            });
                        });
                    break;
                case 'del-bulk':
                    var d = table.checkStatus('demo');
                    if (d.data.length === 0) {
                        layer.msg('璇烽�夋嫨瑕佸垹闄ょ殑鏁版嵁');
                        return;
                    }
                    var data = d.data,
                        names = [],
                        ids = [];
                    layui.each(data, function(index, item) {
                        console.log(item);
                        names.push(item.username);
                        ids.push(item.id);
                    });
                    layer.msg(names.join(','));
                    console.log(ids.join(','));
                    break;
            }
        });
    });
</script>